<template>
	<view class="box-tell" @click="open_notice">
		<view class="left">
			<uni-icons class="deep-color deep-size" type="sound"></uni-icons>
			<text class="text">公告</text>
		</view>
		<view class="center">
			<swiper class="swiper" vertical circular autoplay :interval="1500" :duration="1000">
				<swiper-item class="swiper-item" v-for="item in arr_notice.value" :key="item.id">
					<text class="text">{{ item.text }}</text>
				</swiper-item>
			</swiper>
		</view>
		<view class="right">
			<uni-icons class="deep-color deep-size" type="right"></uni-icons>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, onBeforeMount } from 'vue'
import { get_index_notice } from '../../../api'

const arr_notice = reactive({ value: [] })

const api_get_index_notice = async function () {
	let res = await get_index_notice(1, 5)
	arr_notice.value = res.data
}

const open_notice = function () {
	uni.navigateTo({
		url: '/pages/notice/notice'
	})
}

onBeforeMount(() => {
	api_get_index_notice()
})
</script>

<style scoped lang="scss">
.box-tell {
	// height: 2em;
	height: 55rpx;
	margin-top: 35rpx;
	@extend .f-c-c-n;
	background-color: #eee;
	border-radius: 15rpx;

	.left,
	.center,
	.right {
		@extend .f-c-c-n;
	}

	.left {
		font-size: 24rpx;
		width: 120rpx;
		.text {
			color: $my-color1;
		}
	}

	.center {
		flex: 1;
		height: 45rpx;
		.swiper {
			font-size: 24rpx;
			width: 100%;
			height: 72%;
			.swiper-item {
				overflow: hidden;
				text-overflow: ellipsis;
				.text {
					color: #555;
					white-space: nowrap;
				}
			}
		}
	}

	.right {
		font-size: 24rpx;
		width: 60rpx;
	}
}
</style>
